{% extends 'mobile_base_frame.html' %}
{% load i18n %}
{% block page %}
  <div data-role="page">
     <script type="text/javascript" src="{{ MEDIA_URL }}/wap/mobile_table_vertical.js"></script>
	 <script>
	    $(document).on("pageinit",function(){
			{% autoescape off %}
				var urlparams = {{urlparams|safe}};
				var $p = $(document);
				var m_option={{grid_option|safe}};
				m_option["params"]=urlparams;
				$("#vertical_table",$p).mobileVertTab(m_option);
			{% endautoescape %}
		});
	 </script>
     <div data-role="header" data-theme="b">
	   <a href="index.html" data-role="button" data-icon="back" data-rel="back" data-iconpos="notext" data-corners="true"></a>
	   <h1>{{title}}</h1>
	   <a href="#info" data-rel="popup" data-role="button" data-icon="user" data-iconpos="notext" data-corners="true"></a>
	 </div>
	 <div data-role="content">
	    {% if urlparams %}
		<div id="query" class="wap-query-conditions">
			 {% autoescape off%}
			 {% for c in urlparams %}
				<p>{{c.name|wap_condition_filter}}:{{c.value}}</p>
			 {% endfor %}
			 {% endautoescape%}
		  </div>
	    {% endif %}
	    <div>
			<table id="vertical_table" class="wap-table-vertical">
			</table>
		</div>
        <div id="loader" class="wap-loader-img" style="display:none"><img src="{{MEDIA_URL}}/wap/css/images/ajax-loader.gif"></img></div>
		<div id="more">
		  <a href="#" data-role="button" data-icon="add" data-corners="false">{% trans '更多' %}</a>
		</div>
	 <div data-role="popup" id="help_txt">
		   <p>{{title}}<p>
	   </div>
	   <div data-role="popup" id="info">
			<ul data-role="listview">
			  <li data-icon="false"><a href="#" data-icon="false">{% trans '姓名' %}:{{employee.EName}}</a></li>
			  <li data-icon="false"><a href="#" >{% trans '工号' %}:{{employee.PIN}}</a></li>
			  <li data-icon="false"><a href="#" id="logout">{% trans '退出' %}</a></li>
			</ul>
	   </div>
	   <div data-role="popup" id="event_info">
			<p>© 2014 中控科技</p>
	   </div>
	   </div><!-- /content -->
	   <div data-role="footer" data-theme="b">
		 <div data-role="navbar" data-theme="b">
			 <ul>
				 <li><a href="#help_txt" data-rel="popup" data-icon="info" data-theme="b" ></a></li>
				 <!-- <li><a href="#event_info" data-rel="popup" data-icon="star" data-theme="b"></a></li> -->
				 <li><a href="/{{app_label}}/{{app_menu}}/UI/" data-icon="home" data-theme="b"></a></li>
			 </ul>
		 </div><!-- /navbar -->
	   </div>

  </div>
{% endblock %}